<template>
    <div>
        <tabbar :msg="'/news'"></tabbar>
        <!-- 轮播图 -->
        <div style="padding-top: 50px;">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item>
                    <div class="swipe-item bg1">
                        <div class="gradient-text">
                            新闻中心
                        </div>
                    </div>
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="new_list">
            <div class="new_item" v-for="item, index in info" :key="index">
                <div class="new_item_top">
                    <div>{{ item.title }}</div>
                    <img src="../../images/new/icon1.png" alt="">
                </div>
                <div class="new_item_bottom">
                    <div>2023-{{ item.time }}</div>
                    <div @click="goInfo(item.id, item.title)">查看详情》</div>
                </div>

            </div>
        </div>
        <!-- 底部 -->
        <footers></footers>
    </div>
</template>
<script>
import tabbar from "@/components/tabbar";
import footers from "@/components/footer";
export default {
    name: 'home',
    components: {
        tabbar, footers
    },
    data() {
        return {
            info: [
                {
                    id: 1,
                    time: "07-28",
                    title: "“村BA”火出圈！中国银联携手中国女篮送上惊喜祝福",
                    content: "7月28日晚，贵州“村BA”台盘村和中坝村的对决落下帷幕，在这场激烈胶着的对决中，东道主台盘村获得了本场比赛的胜利。中国银联携手中国女篮，在为双方队伍加油助威的同时，还送上了惊喜祝福和特色礼品。"
                },
                {
                    id: 5,
                    time: "07-24",
                    title: "刚刚！《中国人民银行业务领域数据安全管理办法（征求意见稿）》发布",
                    content: "刚刚，中国人民银行发布了《中国人民银行业务领域数据安全管理办法（征求意见稿）》。《办法》分成总则、数据分类分级、数据安全保护总体要求、数据安全保护管理措施、数据安全保护技术措施、风险监测评估审计与事件处置措施、法律责任、附则八章，共五十七条。主要内容包括："
                },
                {
                    id: 2,
                    time: "07-05",
                    title: "【学习贯彻二十大 支付行业在行动】中国银联：深学笃行新思想 奋进银联新征程",
                    content: "中国银联党委把学习宣传贯彻党的二十大精神作为首要政治任务，在全面学习、全面把握、全面落实三个“全面”上下功夫，引导广大干部员工自觉把思想和行动统一到党中央的决策部署上来，守正创新，奋楫笃行，多措并举推动党的二十大精神在银联系统落地生根，为全面建设社会主义现代化国家贡献银联力量。"
                },
                {
                    id: 3,
                    time: "06-30",
                    title: "【七一】习近平对党的建设和组织工作作出重要指示 代表党中央向全国广大共产党员致以节日问候",
                    content: "新华社北京6月29日电 中共中央总书记、国家主席、中央军委主席习近平近日对党的建设和组织工作作出重要指示指出，全面建设社会主义现代化国家，全面推进中华民族伟大复兴，关键在党，关键在人。党的十八大以来，党中央坚持和加强党的全面领导，坚持党要管党、全面从严治党，提出并实施一系列新理念新思想新战略，开辟了百年大党自我革命新境界。"
                },
                {
                    id: 4,
                    time: "06-28",
                    title: '【反电诈宣传】《反电信网络诈骗法》知多少？',
                    content: '为深入学习贯彻习近平总书记关于打击治理电信网络诈骗犯罪的重要指示精神，认真落实党中央、国务院重大决策部署及人民银行有关工作要求，切实提高人民群众防范电信网络诈骗意识，助力建设更高水平的平安中国，中国支付清算协会坚持“为人民群众办实事”的宗旨，汇聚行业优势智力资源，面向会员单位征集反电诈宣传素材，得到广大会员单位积极响应。'
                },

            ]
        }
    },
    methods: {
        goInfo(id, title) {
            this.$router.push({ path: "/newsDetail", query: { id: id, title: title } })
        }
    }
}
</script>
<style scoped lang="scss">
.swipe-item {
    height: 152px;
    background: url('../../images/home/bg1.png') no-repeat center;
    background-size: cover;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 18px;
    color: #FFFFFF;
    line-height: 24px;
    text-align: center;
    // line-height: 152px;
    position: relative;
}

.bg1 {
    background: url('../../images/new/bg1.png') no-repeat center;
    background-size: cover;
}

// .bg2 {
//     background: url('../../images/home/bg2.png') no-repeat center;
//     background-size: cover;
// }

// .bg3 {
//     background: url('../../images/home/bg3.png') no-repeat center;
//     background-size: cover;
// }

.gradient-text {
    width: 100%;
    background: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* font-size: 58px; */
    /* Adjust font size as needed */
}

::v-deep .van-swipe__indicator {
    width: 12px;
    height: 2px;
    border-radius: 0;
}


.title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #333333;
    // margin: 24px 0 20px 0;
    padding: 24px 0 20px 0;
    text-align: center;
}

.new_list {
    padding: 12px 16px;

    .new_item {
        padding: 12px 0;
        border-bottom: 1px solid #CCCCCC;

        .new_item_top {
            display: flex;

            div {
                width: calc(100% - 135px);
                font-family: PingFang SC;
                font-weight: 400;
                font-size: 14px;
                margin-right: 10px;
            }

            img {
                width: 135px;
                height: 58px;
            }
        }

        .new_item_bottom {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;

            div:first-child {
                font-family: PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #999999;
            }

            div:last-child {
                font-family: PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #063E8D;
            }
        }
    }
}
</style>